<template>
    <div class="love">
        <button @click="getLoveTalk">获取情话</button>
        <ul>
            <li v-for="(talk, index) in loveStore.talkList" :key="talk.id">{{ talk.title }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="Love">
    import { reactive } from 'vue';
    import {nanoid} from 'nanoid'
    import axios from 'axios';
    import {useLoveStore} from '@/store/love'

    // let talkList = reactive([
    //     {id:'aasda01',title:'哈哈哈'},
    //     {id:'aasda02',title:'你好啊'},
    // ])
    const loveStore = useLoveStore()

    async function getLoveTalk(){
        // 连续解构赋值+重命名
        // let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');
        // let obj = {id:nanoid(),title}
        // talkList.unshift(obj)

        loveStore.getLoveTalk_store()
    }
</script>

<style scoped>
.love{
    background-color: pink;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
</style>